{% include 'QLGL/QLGL_index.html' %}

<div class="am-cf admin-main">
  {% include 'sidebar.html' %}
  <!-- content start -->
  <div class="admin-content">
    <div class="admin-content-body">
      <div class="am-cf am-padding">
        <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">字典数据</strong></div>
      </div>
      <div class="am-g" style="position: absolute;height: 100%;right: 0px;left: 260px;width: auto;">

        {% include 'QLGL/ZDSJ/QLGL_ZDSJ_SIDEBAR.html' %}
        <div class="am-u-sm-10" style="position: absolute;width: 100%;left: 200px;right:0px;height: auto;bottom: 0px;top: 0px;width: auto;">


          <div class="am-u-sm-4" style="background-color: rgba(0,0,0,0);overflow-y: scroll;position: absolute;margin: 10px;width: 250px;height: auto;bottom: 100px;top:0;">
            <ul class="am-tree am-tree-folder-select" role="tree" id="myTreeSelectableFolder">
              <!--<li class="am-tree-branch am-hide" data-template="treebranch" role="treeitem" aria-expanded="false">
                <div class="am-tree-branch-header">
                  <button class="am-tree-icon am-tree-icon-caret am-icon-caret-right"><span class="am-sr-only">Open</span></button>
                  <button class="am-tree-branch-name">
                    <span class="am-tree-icon am-tree-icon-folder"></span>
                    <span class="am-tree-label"></span>
                  </button>
                </div>
                <ul class="am-tree-branch-children" role="group"></ul>
                <div class="am-tree-loader" role="alert">Loading...</div>
              </li>-->
              <li class="am-tree-item am-hide" data-template="treeitem" role="treeitem">
                <button class="am-tree-item-name">
                  <span class="am-tree-icon am-tree-icon-item"></span>
                  <span class="am-tree-label"></span>
                </button>
              </li>
            </ul>
          </div>
          <div class="am-u-sm-8" style="float: left;left: 260px;width: auto;right: 0px;position: absolute;height:auto;overflow-y: scroll;bottom: 100px;top: 0px;">
            <div class="am-u-sm-12 am-u-md-12 ">
              <!--中间侧块 注意下面是form表-->

              <label><strong>详细情况</strong> </label>

          <table id="grid" class="am-table am-table-striped am-table-hover table-main am-table-compact am-text-nowrap dataTable no-footer" width="100%" role="grid" style="width: 100%;">
            <thead>
              <tr>
                <th class="table-title" style="width: 30%">评价部件</th>
                <th class="table-title">类别</th>
                <th class="table-title">部位</th>
                <th class="table-title">权重</th>
                <th class="table-title">操作</th>
              </tr>
            </thead>
            <tbody id="tbody_table"></tbody>
          </table>


            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% include 'footer.html' %}
<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="/static/assets/js/jquery.min.js"></script>
<!--<![endif]-->
<script src="/static/assets/js/amazeui.min.js"></script>
<script src="/static/assets/js/amazeui.tree.js"></script>
<script type="text/javascript" src="/static/assets/js/layer.js"></script>
<script src="/static/assets/datatables/amazeui.datatables.min.js"></script>
<script src="/static/assets/dialog/amazeui.dialog.min.js"></script>
<link rel="stylesheet" type="text/css" href="/static/assets/css/amazeui.tree.css" />
<script src="/static/assets/js/app.js"></script>
<style type="text/css">
  .li_a {
    color: #5c5c5c;
  }
</style>
<script type="text/javascript">
  $("#collapse-nav1").addClass("am-in");
  $("#qlgl").removeClass("am-collapsed");
  $("#qlglOzdsj").css("color", "#3399CC");
  $("#qlgl").css("color", "#3399CC");
  $("#zdsjObjqz").removeClass("li_a");
</script>

<script type="text/javascript">
    var tree = $('#myTreeSelectableFolder');
  function read_bridge(information) {
    var data = [];
    var bridge_1 = {}
    for(var i = 0; i < information.length; i++) {
      var bridge_1 = {
        title: information[i].param_name,
        type: 'item',
        attr: {
          id: information[i].param_code
        }
      }
      data.push(bridge_1)
    }

    tree.tree({
      dataSource: function(options, callback) {
        // 模拟异步加载
        setTimeout(function() {
          callback({
            data:  data
          });
        }, 400);
      },
      multiSelect: false,
      cacheItems: true,
      folderSelect: true,
    });
    tree.on('selected.tree.amui', function(event, data) {
      check_bridge(data.selected[0].attr.id)
    });

  }

  var AlertMSG = function(msg) {
    AMUI.dialog.alert({
      title: '错误提示',
      content: msg,
      onConfirm: function() {
        console.log('close');
      }
    });
  }
$.ajaxSetup({
  data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
});
  function check_bridge(param_code) {
    $.ajax({
      "url":"/QLXJ_BJQZ_SJLB_detail/?param_bridge_type_code="+param_code+"",
      "datatype":"json",
      "type":"get",
      "async":"false"
      }).success(function(data){
        if (data.status == 1) {
          detail_add(data.data,param_code)
        } else {
          AlertMSG(data.message)
        }
      }).error(function(data){
        AlertMSG("查看详细信息失败！")
      });
  }

  function detail_add(data,param_code){
    $("#tbody_table").html("");
    for(var i=0;i<data.length;i++){
      // console.log(data[i])
      var position_code = ""
      if(data[i].position_code == 0){
        position_code = "上部结构"
      }else if(data[i].position_code == 1){
        position_code = "下部结构"
      }else if(data[i].position_code == 2){
        position_code = "桥面系"
      }
      $("#tbody_table").append('<tr class="odd"><td class="sorting_1" >'+data[i].bridge_parts_name+'</td><td >'+data[i].parts_no+'</td><td class="sorting_1" align="">'+position_code+'</td> <td id="td_bm" >'+data[i].weight+'</td>  <td  ><div class="am-btn-toolbar"><div class="am-btn-group am-btn-group-xs"><button class="am-btn am-btn-default am-btn-xs am-text-secondary" onclick="son_parts('+data[i].parts_code+',\''+param_code+'\')">子部件</button></div></div></td> </tr>')
    }
  }
 function son_parts(parts_code,param_code){
    window.location.href="/QLXJ_QLLB_ZBJGZ/?parts_code="+parts_code+"&bridge_type="+param_code+""
    // popup("子部件","/QLXJ_BJGL_ADD/?aa="+aa+"")
  }


  function popup(title,url){
        var index = layer.open({
            type: 2,
            title: title,
            content: url,
            area: ['600px', '320px'],
            
        });
  }
var SetDefault = function(v){
    //设置树默认选择
    tree.tree('selectItem', $('#'+v));
    //详情默认选择
    check_bridge(v);
}
    $(function(){
        $.ajax({
            "url": "/QLXJ_BJQZ_SJLB/",
            "datatype": "json",
            "type": "get",
            "async": "false"
          }).success(function(data) {
            if(data.status == 1) {
                read_bridge(data.data);
                //设置默认值
                setTimeout(function(){
                    SetDefault(data.data[0].param_code);
                },500);
            } else {
              AlertMSG(data.message)
            }
          }).error(function(data) {
            AlertMSG("读取桥梁参数失败！")
          });
    });
</script>
</body>

</html>